<template>
  <!-- 搜索卡片 -->
  <ACard :bordered="false" class="search-card">
    <!-- 搜索表单 -->
    <AForm layout="inline" :model="searchForm" class="search-form">
      <AFormItem label="角色名称">
        <AInput v-model:value="searchForm.name" placeholder="请输入角色名称" />
      </AFormItem>
      <AFormItem label="状态">
        <ASelect v-model:value="searchForm.status" placeholder="请选择状态" style="width: 120px">
          <ASelectOption value="">全部</ASelectOption>
          <ASelectOption value="1">启用</ASelectOption>
          <ASelectOption value="0">禁用</ASelectOption>
        </ASelect>
      </AFormItem>
      <AFormItem>
        <ASpace>
          <AButton type="primary" @click="handleSearch">
            <SearchOutlined />
            搜索
          </AButton>
          <AButton @click="handleReset">
            <ReloadOutlined />
            重置
          </AButton>
        </ASpace>
      </AFormItem>
    </AForm>
  </ACard>

  <!-- 表格卡片 -->
  <ACard :bordered="false" class="table-card">
    <ProTable
      ref="tableRef"
      table-key="system-role"
      export-file-name="角色列表"
      :columns="columns"
      :data-source="dataSource"
      :pagination="pagination"
      :loading="loading"
      :scroll="{ x: 900 }"
      @change="handleTableChange"
      @refresh="handleRefresh"
    >
      <!-- 工具栏左侧插槽 -->
      <template #toolbar-left>
        <!-- 如果有自定义操作按钮就显示按钮，否则显示标题 -->
        <div class="table-actions">
          <AButton type="primary" @click="handleAdd">
            <PlusOutlined />
            新增角色
          </AButton>
        </div>
      </template>

      <!-- 表格单元格自定义 -->
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'status'">
          <ATag :color="record.status === 1 ? 'success' : 'default'">
            {{ record.status === 1 ? '启用' : '禁用' }}
          </ATag>
        </template>
        <template v-else-if="column.key === 'action'">
          <ASpace>
            <AButton type="link" size="small" @click="handleEdit(record)">
              编辑
            </AButton>
            <AButton type="link" size="small" @click="handlePermission(record)">
              权限
            </AButton>
            <AButton type="link" size="small" danger @click="handleDelete(record)">
              删除
            </AButton>
          </ASpace>
        </template>
      </template>
    </ProTable>
  </ACard>
</template>

<script>
export default {
  name: 'SystemRole'
}
</script>

<script setup>
import { reactive, ref } from 'vue'
import { message, Modal } from 'ant-design-vue'
import {
  SearchOutlined,
  ReloadOutlined,
  PlusOutlined
} from '@ant-design/icons-vue'
import ProTable from '@/components/ProTable/index.vue'

const loading = ref(false)
const tableRef = ref(null)
const searchForm = reactive({
  name: '',
  status: ''
})

// 状态映射
const statusMap = {
  1: '启用',
  0: '禁用'
}

const columns = [
  { 
    title: 'ID', 
    dataIndex: 'id', 
    key: 'id', 
    width: 80 
  },
  { 
    title: '角色名称', 
    dataIndex: 'name', 
    key: 'name' 
  },
  { 
    title: '角色标识', 
    dataIndex: 'code', 
    key: 'code' 
  },
  { 
    title: '排序', 
    dataIndex: 'sort', 
    key: 'sort', 
    width: 100 
  },
  { 
    title: '状态', 
    dataIndex: 'status', 
    key: 'status', 
    width: 100,
    // 导出时将数字状态转换为中文
    customExport: (value) => statusMap[value] || '未知'
  },
  { 
    title: '备注', 
    dataIndex: 'remark', 
    key: 'remark' 
  },
  { 
    title: '创建时间', 
    dataIndex: 'createTime', 
    key: 'createTime', 
    width: 180 
  },
  { 
    title: '操作', 
    key: 'action', 
    width: 200, 
    fixed: 'right' 
  }
]

const dataSource = ref([
  {
    id: 1,
    name: '超级管理员',
    code: 'admin',
    sort: 1,
    status: 1,
    remark: '拥有所有权限',
    createTime: '2024-01-01 10:00:00'
  },
  {
    id: 2,
    name: '普通用户',
    code: 'user',
    sort: 2,
    status: 1,
    remark: '普通用户权限',
    createTime: '2024-01-02 10:00:00'
  }
])

const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 2,
  showTotal: (total) => `共 ${total} 条`,
  showSizeChanger: true,
  showQuickJumper: true,
  pageSizeOptions: ['10', '20', '50', '100', '200', '500', '1000']
})

const handleSearch = () => {
  message.info('搜索功能开发中...')
}

const handleReset = () => {
  searchForm.name = ''
  searchForm.status = ''
}

const handleAdd = () => {
  message.info('新增角色功能开发中...')
}

const handleEdit = (record) => {
  message.info(`编辑角色：${record.name}`)
}

const handlePermission = (record) => {
  message.info(`设置权限：${record.name}`)
}

const handleDelete = (record) => {
  Modal.confirm({
    title: '确认删除',
    content: `确定要删除角色"${record.name}"吗？`,
    onOk: () => {
      message.success('删除成功')
    }
  })
}

const handleTableChange = (pag) => {
  pagination.current = pag.current
  pagination.pageSize = pag.pageSize
}

// 刷新表格
const handleRefresh = () => {
  message.success('刷新成功')
  // 这里可以调用接口重新加载数据
}
</script>

<style lang="scss" scoped>
.search-card {
  margin-bottom: 16px;
}

.search-form {
  margin-bottom: 16px;
}

// 表格操作按钮（在标题位置）
.table-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

// 移动端适配
@media screen and (max-width: 768px) {
  .search-card {
    margin-bottom: 12px;
  }

  :deep(.ant-card-body) {
    padding: 12px;
  }

  .search-form {
    margin-bottom: 12px;

      // 让 inline 表单在移动端改为纵向堆叠
      :deep(.ant-form-inline) {
        display: block;
        width: 100%;
      }

      // 每个表单项独占一行
      :deep(.ant-form-inline .ant-form-item) {
        display: block;
        width: 100%;
      }

      // 标签置顶且左对齐，减少占用空间
      :deep(.ant-form-item-label) {
        display: block;
        padding-right: 0;
        margin-bottom: 4px;
        text-align: left !important;
        line-height: 1.2;
      }

      // 控件全宽
    :deep(.ant-form-item) {
      margin-bottom: 12px;
    }

    :deep(.ant-input) {
      width: 100% !important;
    }

    :deep(.ant-select) {
      width: 100% !important;
    }

      // 按钮组在小屏可换行并占满宽度
      :deep(.ant-form-item .ant-space) {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px !important;
      }

      :deep(.ant-form-item .ant-space .ant-btn) {
        flex: 1 1 48%;
        min-width: 140px;
      }
  }

  // 表格操作按钮在移动端
  .table-actions {
    width: 100%;
    
    .ant-btn {
      flex: 1;
    }
  }

  // 表格样式优化
  :deep(.ant-table) {
    font-size: 12px;

    .ant-table-thead > tr > th {
      padding: 8px 4px;
      font-size: 12px;
    }

    .ant-table-tbody > tr > td {
      padding: 8px 4px;
      font-size: 12px;
    }

    .ant-btn-link {
      padding: 0 4px;
      font-size: 12px;
    }

    .ant-space {
      gap: 4px !important;
    }

    .ant-tag {
      font-size: 11px;
      padding: 0 4px;
    }
  }

  // 分页器优化
  :deep(.ant-pagination) {
    .ant-pagination-item,
    .ant-pagination-prev,
    .ant-pagination-next {
      min-width: 28px;
      height: 28px;
      line-height: 26px;
      font-size: 12px;
    }

    .ant-pagination-options {
      display: none;
    }

    .ant-pagination-total-text {
      font-size: 12px;
    }
  }
}
</style>
